import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {Button, Card, Descriptions, Form, message, Input, Spin} from "antd";
import {
  getInterfaceInfoByIdUsingGet, invokeInterfaceInfoUsingPost,

} from "../../services/liangapi-backend/interfaceInfoController";
import {useParams} from "react-router";
import TextArea from "antd/es/input/TextArea";

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeRes,setInvokeRes] = useState<any>();
  const [invokeLoading, setinvokeLoading] = useState(false);
  const params = useParams()

  const loadData = async() =>{
    if(!params.id){
      message.error("参数不存在");
      return;
    }
    setLoading(true);
    try {
      const res = await getInterfaceInfoByIdUsingGet({
        id:Number(params.id)
    })
      setData(res.data)
    } catch (error: any) {
      message.error('请求失败' + error.message);

    }
    setLoading(false);
  }
  useEffect(() => {
    loadData();
  }, []);

  const onFinish = async (values: any) => {
    if(!params.id){
      message.error("接口不存在");
      return
    }
    setinvokeLoading(true);
    try {
      const res = await invokeInterfaceInfoUsingPost({
        id:params.id,
        ...values,
      });
      setInvokeRes(res.data);
      message.success('调用成功');
    } catch (error: any) {
      message.error('调用失败' + error.message);
    }
    setinvokeLoading(false);
  };
  return (
    <PageContainer title="查看接口文档">
      <Card>
      {/* eslint-disable-next-line react/jsx-no-undef */}
      {data ? (
          <Descriptions title={data.name} column={1} extra={<Button>调用</Button>}>
            <Descriptions.Item label="接口描述">{data.description}</Descriptions.Item>
            <Descriptions.Item label="接口id">{data.id}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
            <Descriptions.Item label="是否删除">{data.isDelete? '启用' : '未启用'}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
            <Descriptions.Item label="接口名称">{data.name}</Descriptions.Item>
            <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
            <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
            <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
            <Descriptions.Item label="接口状态">{data.status ? '开启' : '关闭'}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>
            <Descriptions.Item label="创建者">{data.userId}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{data.createTime} </Descriptions.Item>
          </Descriptions>

      ) : (
        <>接口不存在</>
      )}
      </Card>
      <Card title="在线测试">
        <Form
          name="invoke"
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            label="请求参数"
            name="userRequestParams"
            rules={[{ required: false, message: 'Please input your username!' }]}
          >
            <TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Card title ="测试结果" loading={invokeLoading}>
        {invokeRes}
      </Card>
    </PageContainer>
  );

};

export default Index;
